<template>
	<view class="login-container">
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序登录 -->
		<view class="login-header">
			<view class="logo-wrapper" :class="{'animate__animated animate__bounceIn': animateEnabled}">
				<image src="@/components/zhq-login/images/logo.png" mode="aspectFill" class="logo"></image>
			</view>
			<view class="welcome-text" :class="{'animate__animated animate__fadeIn': animateEnabled}">
				欢迎回来
			</view>
		</view>
		
		<view class="login-actions">
			<view class="wx-login-btn" hover-class="btn-hover" :hover-start-time="20" :hover-stay-time="70">
				微信一键登录
				<button open-type='getPhoneNumber' @getphonenumber="getPhoneNumber"></button>
			</view>
			<view class="skip-login" @click="leave" hover-class="text-hover" :hover-start-time="20" :hover-stay-time="70">
				暂不登录
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifndef MP-WEIXIN -->
		<!-- h5 app登录 -->
		<view class="login-header">
			<view class="logo-wrapper" :class="{'animate__animated animate__bounceIn': animateEnabled}">
				<image src="@/components/zhq-login/images/logo.png" mode="aspectFill" class="logo"></image>
			</view>
			<view class="welcome-text" :class="{'animate__animated animate__fadeIn': animateEnabled}">
				欢迎登录
			</view>
		</view>
		
		<view class="login-form">
			<view class="form-item" :class="{'animate__animated animate__fadeInUp': animateEnabled}" :style="{animationDelay: animateEnabled ? '0.1s' : '0s'}">
				<view class="item-icon">
					<image src="@/components/zhq-login/images/cellphone.png" mode="aspectFit"></image>
				</view>
				<input 
					type="text" 
					v-model.trim="phone" 
					placeholder="请输入用户名" 
					placeholder-class="placeholder"
					@focus="focusInput('phone')"
					@blur="blurInput"
				/>
			</view>
			
			<view class="form-item" :class="{'animate__animated animate__fadeInUp': animateEnabled}" :style="{animationDelay: animateEnabled ? '0.2s' : '0s'}">
				<view class="item-icon">
					<image src="@/components/zhq-login/images/tapered.png" mode="aspectFit"></image>
				</view>
				<input 
					type="password" 
					v-model.trim="password" 
					placeholder="请输入密码" 
					placeholder-class="placeholder"
					@focus="focusInput('password')"
					@blur="blurInput"
				/>
			</view>
			
			<view class="form-options" :class="{'animate__animated animate__fadeIn': animateEnabled}" :style="{animationDelay: animateEnabled ? '0.3s' : '0s'}">
				<view class="quick-login" @click="showQuickLogin" hover-class="text-hover" :hover-start-time="20" :hover-stay-time="70">
					手机快捷登录
				</view>
				<view class="forgot-pwd" @click="showForgotPwd" hover-class="text-hover" :hover-start-time="20" :hover-stay-time="70">
					忘记密码？
				</view>
			</view>
			
			<view 
				class="submit-btn" 
				:class="{'animate__animated animate__fadeInUp': animateEnabled, 'disabled': loading}" 
				:style="{animationDelay: animateEnabled ? '0.4s' : '0s'}"
				@click="login_submit"
				hover-class="btn-hover" 
				:hover-start-time="20" 
				:hover-stay-time="70"
			>
				<text v-if="!loading">登 录</text>
				<text v-else class="loading-icon">⏳</text>
			</view>
			
			<view 
				class="register-btn" 
				:class="{'animate__animated animate__fadeIn': animateEnabled}" 
				:style="{animationDelay: animateEnabled ? '0.5s' : '0s'}"
				@click="goToRegister"
				hover-class="text-hover" 
				:hover-start-time="20" 
				:hover-stay-time="70"
			>
				还没有账号？<text class="highlight">立即注册</text>
			</view>
			
			<view 
				class="skip-login" 
				:class="{'animate__animated animate__fadeIn': animateEnabled}" 
				:style="{animationDelay: animateEnabled ? '0.6s' : '0s'}"
				@click="leave"
				hover-class="text-hover" 
				:hover-start-time="20" 
				:hover-stay-time="70"
			>
				暂不登录
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
import { loginAPI, wechatLoginAPI } from '@/utils/request.js'

export default {
  data() {
    return {
      phone: '',
      password: '',
      loading: false,
      activeInput: null,
      animateEnabled: true
    };
  },
  onShow() {
    // 页面显示时重置动画状态
    this.animateEnabled = true;
  },
  onHide() {
    // 页面隐藏时禁用动画
    this.animateEnabled = false;
  },
  methods: {
    msg(msg) {
      uni.showToast({
        title: msg,
        icon: 'none',
        position: 'top'
      })
    },
    
    focusInput(type) {
      this.activeInput = type;
    },
    
    blurInput() {
      this.activeInput = null;
    },
    
    showQuickLogin() {
      this.msg('手机快捷登录功能即将上线');
    },
    
    showForgotPwd() {
      this.msg('请通过忘记密码功能找回');
    },

    async login_submit() {
      if (this.loading) return;
      
      if (!this.phone) {
        this.msg('请输入账号');
        return;
      }
      if (!this.password) {
        this.msg('请输入密码');
        return;
      }
      
      this.loading = true;
      try {
        const response = await loginAPI(this.phone, this.password);
        if (response.code === 200) {
          uni.setStorageSync('userID', this.phone);
          uni.setStorageSync('userInfo', response.data.user);
		  

          this.msg('登录成功');
          setTimeout(() => {
            this.goToHomePage();
          }, 1000);
        } else {
          this.msg(response.message || '登录失败');
          uni.vibrateShort();
        }
      } catch (error) {
        console.error('登录失败:', error);
        this.msg('登录失败，请重试');
        uni.vibrateShort();
      } finally {
        this.loading = false;
      }
    },

    goToHomePage() {
      uni.reLaunch({
        url: '/pages/index/table'
      });
    },
    
    goToRegister() {
      uni.navigateTo({
        url: '/pages/index/register'
      });
    },

    leave() {
      uni.reLaunch({
        url: '/pages/index/table'
      })
    }
  }
}
</script>

<style>
	/* 基础样式 */
	page {
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		height: 100%;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	
	.login-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding: 40rpx;
		box-sizing: border-box;
		position: relative;
	}
	
	/* 头部样式 */
	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
		margin-bottom: 80rpx;
	}
	
	.logo-wrapper {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 10rpx 30rpx rgba(53, 136, 218, 0.15);
		transition: all 0.3s ease;
	}
	
	.logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}
	
	.welcome-text {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
		margin-top: 40rpx;
		letter-spacing: 1rpx;
	}
	
	/* 表单样式 */
	.login-form {
		display: flex;
		flex-direction: column;
	}
	
	.form-item {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 50rpx;
		padding: 20rpx 40rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		border: 2rpx solid #e1e5eb;
		opacity: 1;
		transform: translateY(0);
	}
	
	.form-item:focus-within {
		border-color: #3588da;
		box-shadow: 0 5rpx 20rpx rgba(53, 136, 218, 0.2);
	}
	
	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.item-icon image {
		width: 100%;
		height: 100%;
	}
	
	.form-item input {
		flex: 1;
		height: 80rpx;
		font-size: 32rpx;
		color: #333;
	}
	
	.placeholder {
		color: #c0c4cc;
		font-size: 32rpx;
	}
	
	/* 选项样式 */
	.form-options {
		display: flex;
		justify-content: space-between;
		margin-bottom: 60rpx;
		font-size: 28rpx;
		opacity: 1;
	}
	
	.quick-login, .forgot-pwd {
		color: #666;
		transition: color 0.2s;
	}
	
	/* 按钮样式 */
	.submit-btn {
		background: linear-gradient(135deg, #3588da 0%, #2a6fc9 100%);
		color: #fff;
		height: 100rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-weight: 500;
		box-shadow: 0 10rpx 20rpx rgba(53, 136, 218, 0.3);
		transition: all 0.3s ease;
		margin-bottom: 30rpx;
		opacity: 1;
		transform: translateY(0);
	}
	
	.submit-btn.disabled {
		opacity: 0.7;
		background: linear-gradient(135deg, #a0a0a0 0%, #808080 100%);
	}
	
	.btn-hover {
		transform: translateY(-5rpx);
		box-shadow: 0 15rpx 25rpx rgba(53, 136, 218, 0.4);
	}
	
	.loading-icon {
		animation: rotate 1s linear infinite;
	}
	
	@keyframes rotate {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}
	
	/* 注册按钮 */
	.register-btn {
		text-align: center;
		color: #666;
		font-size: 30rpx;
		margin-bottom: 40rpx;
		opacity: 1;
	}
	
	.highlight {
		color: #3588da;
		font-weight: 500;
		margin-left: 10rpx;
	}
	
	/* 跳过登录 */
	.skip-login {
		text-align: center;
		color: #999;
		font-size: 30rpx;
		opacity: 1;
	}
	
	/* 微信登录样式 */
	.login-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.wx-login-btn {
		background: linear-gradient(135deg, #09bb07 0%, #2aae67 100%);
		color: #fff;
		height: 100rpx;
		width: 100%;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-weight: 500;
		box-shadow: 0 10rpx 20rpx rgba(9, 187, 7, 0.3);
		transition: all 0.3s ease;
		position: relative;
		margin-bottom: 40rpx;
	}
	
	.wx-login-btn button {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0;
	}
	
	/* 交互效果 */
	.text-hover {
		color: #3588da !important;
		transform: scale(1.05);
	}
</style>